<template>
  <div id="app">
    <navbar></navbar>
    <right-side></right-side>
    <router-view class="mainArea" />
    <footer-area v-if="this.$store.state.choose!=='edit' &&
    this.$store.state.choose!=='chat'"></footer-area>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'
import RightSide from '../src/components/RightSide.vue'
import FooterArea from '../src/components/FooterArea.vue'
export default {
  name: 'App',
  components: {
    Navbar,
    RightSide,
    FooterArea
  }
}
</script>

<style>
#app {
  width: 100vw;
  box-sizing: border-box;
  padding-top: 60px;
  height: 100vh;
}
.mainArea {
  width: 100vw;
  box-sizing: border-box;
  min-height: calc(100vh - 60px - 200px);
  background-color: #f8f8f8;
}
</style>
